<template>
  <!-- 聚合码 -->
  <el-dialog
    v-if="qrCode.show"
    :visible.sync="qrCode.show"
    :title="qrCode.title"
    width="500px"
  >
    <div v-loading="!qrCode.value" class="text-center">
      <PicViewer
        v-if="qrCode.show && qrCode.value"
        ref="qrcode"
        :value="qrCode.value"
        qrcode
      >
        <template v-slot="{ src }">
          <img :src="src" @load="qrCodeLoad(src)" />
        </template>
      </PicViewer>
      <div class="tips" v-if="qrCode.tips">{{ qrCode.tips }}</div>
      <div class="mt-20px" v-if="qrCode.showDownLoad">
        <a :href="qrCode.path" :download="qrCode.title">
          <el-button type="primary" icon="el-icon-download">
            保存二维码
          </el-button>
        </a>
      </div>
      <div class="text-12px mt-20px text-[#ddd]">{{ qrCode.value }}</div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'QrCodePreview',
  data () {
    return {
      qrCode: {
        show: false,
        title: '',
        showDownLoad: false,
        value: '',
        tips: ''
      }
    }
  },
  methods: {
    qrCodeLoad (src) {
      this.qrCode.path = src
      this.qrCode.showDownLoad = true
    },
    show (
      qrCode = {
        title: '',
        tips: '',
        text: ''
      }
    ) {
      this.qrCode.title = qrCode.title
      this.qrCode.tips = qrCode.tips || ''
      this.qrCode.value = qrCode.text
      this.qrCode.showDownLoad = false
      this.qrCode.show = true
    }
  }
}
</script>
<style scoped>
.tips {
  text-align: center;
  padding-top: 10px;
  color: #999;
}
</style>
